<template>
  <view class="container">
    <!-- 1. 搜索栏 -->
    <view class="search-section">
      <view class="custom-search-bar">
        <uni-icons type="search" size="18" color="#999" class="search-icon" />
        <input
            class="search-input"
            placeholder="搜索商品/服务"
            :value="searchValue"
            @input="onSearchInput"
            @confirm="onSearch"
            confirm-type="search"
        />
      </view>
    </view>

    <!-- 2. 轮播图 -->
    <view class="swiper-section">
      <swiper
          class="swiper"
          :indicator-dots="true"
          :autoplay="true"
          :interval="3000"
          :duration="500"
          circular
      >
        <swiper-item v-for="(item, index) in swiperList" :key="index">
          <image
              :src="item.image"
              class="swiper-image"
              mode="aspectFill"
              @click="onSwiperClick(item)"
          />
        </swiper-item>
      </swiper>
    </view>

    <!-- 3. 快捷入口 -->
    <view class="quick-entry-section">
      <view class="section-title">快捷服务</view>
      <view class="quick-entry-grid">
        <view
            v-for="(item, index) in quickEntries"
            :key="index"
            class="entry-item"
            @click="onEntryClick(item)"
        >
          <view class="entry-icon">
            <uni-icons :type="item.icon" size="30" :color="item.color" />
          </view>
          <text class="entry-text">{{ item.name }}</text>
        </view>
      </view>
    </view>

    <!-- 4. 热门推荐 -->
    <view class="hot-recommend-section">
      <view class="section-title">热门推荐</view>
      <view class="product-list">
        <view
            v-for="(product, index) in hotProducts"
            :key="index"
            class="product-card"
            @click="onProductClick(product)"
        >
          <image :src="product.image" class="product-image" mode="aspectFill" />
          <view class="product-info">
            <text class="product-name">{{ product.name }}</text>
            <view class="product-meta">
              <text class="product-price">¥{{ product.price }}</text>
              <text class="product-sales">销量: {{ product.sales }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchValue: '',
      swiperList: [
        {
          image: '/static/c1.png',
          link: '/pages/detail/detail?id=1',
          title: '热门活动1'
        },
        {
          image: '/static/c2.png',
          link: '/pages/detail/detail?id=2',
          title: '热门活动2'
        },
        {
          image: '/static/c3.png',
          link: '/pages/detail/detail?id=3',
          title: '热门活动3'
        }
      ],
      quickEntries: [
        { name: '会员中心', icon: 'person', color: '#007AFF', link: '/pages/store/member/index' },
        { name: '店铺管理', icon: 'flag', color: '#FF9500', link: '/pages/store/index/index' },
        { name: '商品管理', icon: 'gift', color: '#FF3B30', link: '/pages/store/goods/index' },
        { name: '充值管理', icon: 'cart', color: '#4CD964', link: '/pages/store/recharge/index' },
        { name: '客服中心', icon: 'chat', color: '#5856D6', link: '/pages/service/index' },
        { name: '地址管理', icon: 'location', color: '#FF2D55', link: '/pages/address/index' }
      ],
      hotProducts: [
        {
          id: 1,
          name: '高品质会员卡',
          image: '/static/c4.png',
          price: '299',
          sales: 1289,
          link: '/pages/product/detail?id=1'
        },
        {
          id: 2,
          name: '尊享会员套餐',
          image: '/static/c5.png',
          price: '499',
          sales: 892,
          link: '/pages/product/detail?id=2'
        },
        {
          id: 3,
          name: '年度会员特权',
          image: '/static/c6.png',
          price: '899',
          sales: 567,
          link: '/pages/product/detail?id=3'
        },
        {
          id: 4,
          name: '企业会员服务',
          image: '/static/c7.png',
          price: '1999',
          sales: 234,
          link: '/pages/product/detail?id=4'
        }
      ]
    }
  },
  methods: {
    onSearch(e) {
      const value = e.detail.value || e.target.value;
      console.log('搜索内容:', value);
      if (value.trim()) {
        uni.navigateTo({
          url: `/pages/search/result?keyword=${encodeURIComponent(value)}`
        });
      }
    },
    onSearchInput(e) {
      this.searchValue = e.detail.value || e.target.value;
    },
    onSwiperClick(item) {
      uni.navigateTo({
        url: item.link
      });
    },
    onEntryClick(item) {
      uni.navigateTo({
        url: item.link
      });
    },
    onProductClick(product) {
      uni.navigateTo({
        url: product.link
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 0;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.search-section {
  padding: 10px 15px;
  background-color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
}

.custom-search-bar {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 20px;
  padding: 8px 16px;
  height: 36px;
}

.search-icon {
  margin-right: 8px;
  flex-shrink: 0;
}

.search-input {
  flex: 1;
  height: 100%;
  font-size: 14px;
  color: #333;
  background: transparent;
  border: none;
  outline: none;

  &::placeholder {
    color: #999;
    font-size: 14px;
  }
}

.swiper {
  height: 180px;
  border-radius: 12px;
  overflow: hidden;
}

.swiper-image {
  width: 100%;
  height: 100%;
  border-radius: 12px;
}

.quick-entry-section {
  background-color: #ffffff;
  padding: 20px 15px;
  margin-bottom: 15px;
  border-radius: 12px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
  padding-left: 5px;
}

.quick-entry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.entry-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  background-color: #f9f9f9;
  transition: all 0.3s ease;
}

.entry-item:active {
  background-color: #e6f7ff;
  transform: scale(0.95);
}

.entry-icon {
  margin-bottom: 8px;
}

.entry-text {
  font-size: 12px;
  color: #666;
  text-align: center;
}

.hot-recommend-section {
  background-color: #ffffff;
  padding: 20px 15px;
  border-radius: 12px;
}

.product-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.product-card {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.product-card:active {
  transform: translateY(2px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.product-image {
  width: 100%;
  height: 120px;
}

.product-info {
  padding: 10px;
}

.product-name {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}

.product-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-price {
  font-size: 16px;
  color: #ff5000;
  font-weight: bold;
}

.product-sales {
  font-size: 12px;
  color: #999;
}
</style>